<ui:composition template="/publico/template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets">

    <ui:define name="conteudo">
        <h:form id="fManterCliente" >

            <p:fieldset id="fsDadosPrincipais" legend="#{msg.geralDadosPrincipais}" toggleable="true" toggleSpeed="1">
                <p:panelGrid columns="1">
                    <p:outputLabel for="itNome" value="#{msg.clienteNome}"/>
                    <p:inputText id="itNome" style="width:300px" value="#{manterCliente.cliente.nome}" required="true" disabled="#{manterCliente.isDetalhe}" requiredMessage="#{msg.clienteNome}: #{msg.geralCampoObrigatorio}"/>
                    <p:outputLabel for="itIdade" value="#{msg.clienteIdade}"/>
                    <p:inputText id="itIdade" style="width:300px" value="#{manterCliente.cliente.idade}" required="true" disabled="#{manterCliente.isDetalhe}" requiredMessage="#{msg.clienteIdade}: #{msg.geralCampoObrigatorio}"/>
                    <p:outputLabel for="somSexo" value="#{msg.clienteSexo}"/>
                    <p:selectOneMenu id="somSexo" style="width:300px" effectSpeed="1" value="#{manterCliente.cliente.sexo}" required="true" disabled="#{manterCliente.isDetalhe}" requiredMessage="#{msg.clienteSexo}: #{msg.geralCampoObrigatorio}">
                        <f:selectItem itemValue="" itemLabel="#{msg.geralSelecione}"/>
                        <f:selectItem itemValue="m" itemLabel="#{msg.geralSexoMasculino}"/>
                        <f:selectItem itemValue="f" itemLabel="#{msg.geralSexoFeminino}"/>
                    </p:selectOneMenu>
                    <p:outputLabel for="itDataNascimento" value="#{msg.clienteDataNascimento}"/>
                    <p:inputMask id="itDataNascimento" mask="#{msg.geralMascaraData}" style="width:300px" value="#{manterCliente.cliente.dataNascimento}" required="true" disabled="#{manterCliente.isDetalhe}" requiredMessage="#{msg.clienteDataNascimento}: #{msg.geralCampoObrigatorio}">
                        <f:convertDateTime type="date" dateStyle="medium" timeZone="GMT-3" locale="pt_BR"/>
                    </p:inputMask>
                </p:panelGrid>
                <br/>
            </p:fieldset>

            <p:spacer height="5"/>

            <p:outputPanel id="opTelefones" autoUpdate="true">
                <p:fieldset id="fsTelefones" legend="#{msg.clienteTelefonesParaContato}" toggleable="true" toggleSpeed="1">
                    <p:panelGrid columns="1">
                        <p:outputLabel value="#{msg.clienteTelefoneDDD}" for="itDDD"/>
                        <p:inputMask id="itDDD" mask="(99)" maxlength="4" style="width:300px" value="#{manterCliente.ddd}" required="true" disabled="#{manterCliente.isDetalhe}" requiredMessage="#{msg.clienteTelefoneDDD}: #{msg.geralCampoObrigatorio}"/>
                        <p:outputLabel value="#{msg.clienteTelefoneNumero}" for="itTelNumero"/>
                        <p:inputMask id="itTelNumero" mask="9999-9999" style="width:300px" value="#{manterCliente.numero}" required="true" disabled="#{manterCliente.isDetalhe}" requiredMessage="#{msg.clienteTelefoneNumero}: #{msg.geralCampoObrigatorio}"/>
                        <p:commandButton icon="ui-icon-plus"
                                         value="#{msg.geralAdicionar}"
                                         partialSubmit="true"
                                         process="fsTelefones"
                                         action="#{manterCliente.adicionarTelefone}"
                                         rendered="#{!manterCliente.isDetalhe}">
                        </p:commandButton>
                    </p:panelGrid>
                    <p:spacer height="5"/>
                    <br/>
                    <p:dataTable id="dtClientes"
                                 value="#{manterCliente.cliente.telefones}"
                                 var="telefone"
                                 emptyMessage=""
                                 rendered="#{not empty manterCliente.cliente.telefones}">
                        <p:column headerText="#{msg.clienteTelefoneDDD}" style="width: 20%">
                            #{telefone.ddd}
                        </p:column>
                        <p:column headerText="#{msg.clienteTelefoneNumero}" style="width: 60%">
                            #{telefone.numero}
                        </p:column>
                        <p:column headerText="#{msg.geralOpcoes}" style="width: 20%; text-align: center"
                                  rendered="#{!manterCliente.isDetalhe}">
                            <p:commandButton title="#{msg.geralRemover}"
                                             icon="ui-icon-trash"
                                             update="@form"
                                             process="@this"
                                             action="#{manterCliente.removerTelefone(telefone)}">
                            </p:commandButton>
                        </p:column>
                    </p:dataTable>
                </p:fieldset>
            </p:outputPanel>

            <br/>

            <p:commandButton icon="ui-icon-check" 
                             value="#{msg.geralSalvar}"
                             action="#{manterCliente.salvar}"
                             process="@this, fsDadosPrincipais"
                             update="fsDadosPrincipais"
                             rendered="#{!manterCliente.isDetalhe}"/>

            <p:spacer width="10" rendered="#{!manterCliente.isDetalhe}"/>

            <p:commandButton icon="ui-icon-plus"
                             value="#{msg.geralNovo}"
                             action="#{manterCliente.createSetup}"
                             ajax="false"
                             rendered="#{manterCliente.isDetalhe}"/>

            <p:spacer width="10" rendered="#{manterCliente.isDetalhe}"/>

            <p:commandButton icon="ui-icon-clipboard"
                             value="#{msg.geralEditar}"
                             action="#{manterCliente.setIsDetalhe(false)}"
                             ajax="false"
                             rendered="#{manterCliente.isDetalhe}"/>
            
            <p:spacer width="10" rendered="#{manterCliente.isDetalhe}"/>

            <p:commandButton icon="ui-icon-arrowreturnthick-1-w" 
                             value="#{msg.geralVoltar}"
                             action="#{manterCliente.voltar}"
                             ajax="false"
                             immediate="true"/>

        </h:form>
    </ui:define>
</ui:composition>